<template>
    <div>
        <top-bar></top-bar>
        <left-bar :datas='data'></left-bar>
        <div class="department">
            <div class="system">
                <home-bar :currentPage='currentPage'></home-bar>
                <div class="system-main">
                    <div class="main-position">
                        首页 > 员工管理 > 新增员工
                    </div>
                    <div class="main-height"></div>
                    <div class="main-mains">
                        <div class="main-top-nav">
                            <ul>
                                <router-link to="/employees" @click.native="addPath('/employees','员工管理')">
                                    <li class="active">员工管理</li>
                                </router-link>
                                <router-link to="/departments" @click.native="addPath('/departments','员工管理')">
                                    <li>部门管理</li>
                                </router-link>
                            </ul>
                        </div>
                        <div class="employee">
                            <div class="employee-return">
                                <router-link to="/employees" @click.native="addPath('/departments','员工管理')">
                                    <i class="el-icon-arrow-left"></i>
                                    <span>新增员工</span>
                                </router-link>
                            </div>
                            <div class="employee-add-mains">
                                <div class="employee-add-mains-top employee-add-mains-mar">员工信息</div>
                                <div class="employee-add-mains-tops">
                                    <div class="clear employee-add-mains-mar ">
                                        <div class="fl">
                                            <span class="employee-add-txt">员工编号</span>
                                            <el-input v-model="number"></el-input>
                                        </div>
                                        <div class="fl">
                                            <span class="employee-add-txt">工作年龄</span>
                                            <el-input v-model="age"></el-input>
                                        </div>
                                    </div>
                                    <div class="clear employee-add-mains-mar">
                                        <div class="fl ">
                                            <span class="employee-add-txt">员工姓名</span>
                                            <el-input v-model="name"></el-input>
                                        </div>
                                        <div class="fl">
                                            <span class="employee-add-txt">员工性别</span>
                                            <el-select v-model="value" placeholder="请选择">
                                                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </div>
                                        <div class="fl">
                                            <span class="employee-add-txt">员工密码</span>
                                            <el-input v-model="password"></el-input>
                                        </div>
                                    </div>
                                    <div class="clear employee-add-mains-mar">
                                        <div class="fl">
                                            <span class="employee-add-txt">入职时间</span>
                                            <el-date-picker v-model="dates" value-format="yyyy-MM-dd"  type="date" placeholder="选择日期">
                                            </el-date-picker>
                                        </div>
                                        <div class="fl">
                                            <span class="employee-add-txt">员工手机</span>
                                            <el-input v-model="phone"></el-input>
                                        </div>
                                        <div class="fl">
                                            <span class="employee-add-txt">员工地址</span>
                                            <el-input v-model="local"></el-input>
                                        </div>
                                    </div>
                                    <div class="clear employee-add-mains-mar">
                                        <div class="fl">
                                            <span class="employee-add-txt">电子邮箱</span>
                                            <el-input v-model="email"></el-input>
                                        </div>
                                        <div class="fl">
                                            <span class="employee-add-txt">员工部门</span>
                                            <el-select v-model="values" placeholder="请选择" @change="jurisdiction">
                                                <el-option    v-for="item in optionss" :key="item.value" :label="item.label" :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </div>
                                        <div class="fl">
                                            <span class="employee-add-txt">员工职位</span>
                                            <el-input v-model="position"></el-input>
                                        </div>
                                    </div>
                                </div>
                                <div class="employee-add-mainss">
                                    <div class="employee-add-mainss-top">
                                        权限设置
                                    </div>
                                    <div class="employee-add-mainss-table">
                                        <div class="employee-add-mainss-table-top clear">
                                            <div class="fl " style="width:16%;">一级</div>
                                            <div class="fl " style="width:16%;">二级分类</div>
                                            <div class="fl" style="width:68%;">权限选择</div>
                                        </div>
                                        <div class="employee-add-mainss-table-con clear">
                                            <div v-for="(item,index) in dataLists" :key="index" class="clear table-cons">
                                                <div class="fl table-con1" :style="{width:'16%',height:item.list.length *36 +'px',lineHeight:item.list.length *36 +'px'}" v-if="item.list.length">
                                                    {{item.name}}
                                                </div>
                                                <div class="fl table-con1" :style="{width:'16%',height:'36px',lineHeight:'36px'}" v-else>{{item.name}}</div>
                                                <div class="fl table-con2" style="width:16%;">
                                                    <p class="center2" v-if="item.list.length==0">{{item.name}}</p>
                                                    <p class="center2" v-for="(items,index) in item.list" :key="index">{{items.name}}</p>
                                                </div>
                                                <div class="fl table-con3" style="width:68%;">
                                                    <div class="table-con3-cons" v-for="(items,index) in item.list" :key="index">
                                                        <span v-for="(itemss,index) in items.list" :key="index">
                                                                    <input  type="checkbox" checked    :data1=item.id  :data2=items.id  :name=items.name  :value=itemss.id>
                                                                    {{itemss.name}}
                                                            </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="employee-add-mainss-bto">
                                        <router-link to="/employees" @click.native="addPath('/employees','员工管理')">
                                            <span>取消</span>
                                        </router-link>
                                        <span @click="confirm()">确认</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import topBar from "../../public/top";
import leftBar from "../../public/left";
import homeBar from "../../public/homebar";
export default {
  components: {
    leftBar,
    topBar,
    homeBar
  },
  data() {
    return {
      data: "/employees",
      currentPage: {
        path: "/adddepartment",
        name: "员工管理"
      },
      dataLists: [],
      age: "", //工作年龄
      number: "", // 员工编号
      name: "", // 员工姓名
      password: "", //员工密码
      phone: "", // 员工手机
      local: "", // 员工地址
      email: "", // 员工邮箱
      value: "", // 员工性别
      dates: "", // 入职时间
      options: [
        {
          value: 1,
          label: "男"
        },
        {
          value: 0,
          label: "女"
        }
      ],
      values: "", //员工部门
      optionss: [], // 员工部门列表
      position: "" //员工职位
    };
  },
  methods: {
    addPath(n1, n2) {
      //点击切换home-bar
      var obj = {};
      obj.n1 = n1;
      obj.n2 = n2;
      this.$store.commit("addPath", obj);
    },
    departmentList() {
      let _this = this;
      _this.optionss = [];
      _this
        .$http({
          url:
            _this.urls +
            "/who/Department/getDataListAll/" +
            localStorage.getItem("uid") +
            "/" +
            localStorage.getItem("token"),
          method: "post",
          data: {}
        })
        .then(function(res) {
          let data = res.data;
          if (data.code == "1") {
            for (let i = 0; i < data.data.length; i++) {
              let arrStr = { value: data.data[i].id, label: data.data[i].name };
              _this.optionss.push(arrStr);
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    jurisdiction(val) {
      let _this = this;
      _this.dataLists = [];
      _this
        .$http({
          url:
            _this.urls +
            "/who/Jurisdiction/getDepJur/" +
            localStorage.getItem("uid") +
            "/" +
            localStorage.getItem("token"),
          method: "post",
          data: {
            dep_id: val
          }
        })
        .then(function(res) {
          let data = res.data;
          if (data.code == "1") {
            _this.dataLists = data.data;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    confirm() {
      let _this = this;
      if (_this.value === " ") {
        _this.$message.error("请选择员工性别");
        return false;
      }
      if (_this.number == "") {
        _this.$message.error("请输入员工编号");
        return false;
      } else {
        let reg = /^[0-9]*$/;
        if (!reg.test(_this.number)) {
          _this.$message.error("请输入正确的员工编号");
          return false;
        }
      }
      if (_this.age == "") {
        _this.$message.error("请输入工作年龄");
        return false;
      } else {
        let reg = /^[0-9]*$/;
        if (!reg.test(_this.number)) {
          _this.$message.error("请输入正确的工作年龄");
          return false;
        }
      }
      if (_this.name == "") {
        _this.$message.error("请输入员工姓名");
        return false;
      }
      if (_this.dates == "") {
        _this.$message.error("请选择员工入职时间");
        return false;
      }
      if (_this.password == "") {
        _this.$message.error("请输入员工密码");
        return false;
      }
      if (_this.phone == "") {
        _this.$message.error("请输入员工手机");
        return false;
      } else {
        if (!/^1[3|4|5|8][0-9]\d{4,8}$/.test(_this.phone)) {
          _this.$message.error("请输入正确的手机号码");
          return false;
        }
      }
      if (_this.local == "") {
        _this.$message.error("请输入员工地址");
        return false;
      }
      if (_this.email == "") {
        _this.$message.error("请输入员工电子邮箱");
        return false;
      } else {
        let reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
        if (!reg.test(_this.email)) {
          _this.$message.error("请输入正确的邮箱");
          return false;
        }
      }
      if (_this.values == "") {
        _this.$message.error("请选择员工所属部门");
        return false;
      }
      if (_this.position == "") {
        _this.$message.error("请输入员工职位");
        return false;
      }
      let obj = document.getElementsByTagName("input");
      let ids = "";
      let id_one = [];
      let id_two = [];
      for (let k in obj) {
        if (obj[k].checked) {
          id_one.push(obj[k].getAttribute("data1"));
          id_two.push(obj[k].getAttribute("data2"));
          ids = ids + obj[k].value + ",";
        }
      }
      let id_one_new = Array.from(new Set(id_one));
      let id_two_new = Array.from(new Set(id_two));
      for (let i = 0; i < id_one_new.length; i++) {
        ids = ids + id_one_new[i] + ",";
      }
      for (let j = 0; j < id_two_new.length; j++) {
        ids = ids + id_two_new[j] + ",";
      }
      _this
        .$http({
          url:
            _this.urls +
            "/who/Staff/add/" +
            localStorage.getItem("uid") +
            "/" +
            localStorage.getItem("token"),
          method: "post",
          data: {
            serial: _this.number,
            name: _this.name,
            password: _this.password,
            sex: _this.value,
            phone: _this.phone,
            email: _this.email,
            age_limit: _this.age,
            position: _this.position,
            address: _this.local,
            dep_id: _this.values,
            entry_time: _this.dates,
            jur_id: ids
          }
        })
        .then(function(res) {
          let data = res.data;
          if (data.code == "1") {
            _this.$message({
              message: "新增员工成功",
              type: "success"
            });
            _this.number = "";
            _this.name = "";
            _this.phone = "";
            _this.email = "";
            _this.position = "";
            _this.local = "";
          } else {
            _this.$message.error(data.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  activated() {
    //获取部门列表
    this.departmentList();
  }
};
</script>

<style lang="less">
@import "employee.less";
</style>

